<template>
    <div class="container">
        <!-- 数据大屏展示内容区域 -->
        <div class="screen" ref="screen">
            <div class="top">
                <Top />
            </div>
            <div class="bottom">
                <div class="left">
                    <tourist class="tourist"></tourist>
                    <sex class="sex"></sex>
                    <Age class="age"></Age>
                </div>
                <div class="center">
                    <Map class="map"></Map>
                    <Lines class="line"></Lines>
                </div>
                <div class="right">
                    <Rank class="rank"></Rank>
                    <Year class="year"></Year>
                    <Counter class="count"></Counter>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//获取数据大屏展示内容盒子的DOM元素
//引入顶部的子组件
import Top from './components/top/index.vue'
// 左侧
import tourist from './components/tourist/tourist.vue'
import Sex from './components/sex/sex.vue'
import Age from './components/age/age.vue'
// 中间
import Map from './components/map/map.vue'
import Lines from './components/line/line.vue'
//引入右侧三个子组件
import Rank from './components/rank/index.vue';
import Year from './components/year/index.vue';
import Counter from './components/couter/index.vue'
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.$refs.screen.style.transform = `scale(${this.getScale()}) translate(-50%,-50%)`//缩放的比例
        //监听视口变化
        window.onresize = () => {
            this.$refs.screen.style.transform = `scale(${this.getScale()}) translate(-50%,-50%)`
        }
    },
    components: {
        Top,
        tourist,
        Sex,
        Age,
        Map,
        Lines,
        Rank,
        Year,
        Counter
    },
    methods: {
        //定义大屏缩放比例
        getScale(w = 1920, h = 1080) {
            const ww = window.innerWidth / w
            const wh = window.innerHeight / h
            return ww < wh ? ww : wh
        }

    },
}


</script>
<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    background: url(./images/bg.png) no-repeat;
    background-size: cover;

    .screen {
        position: fixed;
        width: 1920px;
        height: 1080px;
        left: 50%;
        top: 50%;

        transform-origin: left top; //设置动画的基心点

        .top {
            width: 100%;
            height: 40px;
        }

        .bottom {
            display: flex;

            .left {
                flex: 1;
                height: 1040px;
                display: flex;
                flex-direction: column;

                .tourist {
                    flex: 1.2;
                }

                .sex {
                    flex: 1;
                }

                .age {
                    flex: 1;
                }
            }

            .center {
                flex: 1.7;
                display: flex;
                flex-direction: column;

                .map {
                    height: 78%;
                }

                .line {
                    flex: 1;
                }
            }

            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                margin-left: 40px;

                .rank {
                    flex: 1.5;
                }

                .year {
                    flex: 1;

                }

                .count {
                    flex: 1;
                }
            }
        }
    }
}
</style>